<template>
    <section class="alert_ri">
  			<!--<table-more :id = "id" :tableData="tableData" :tableLabel="tableLabel"></table-more>-->
        	<el-form :inline="true" :model="form" class="demo-form-inline">
			  <el-form-item >
			    <el-date-picker
			      v-model="form.time"
			      type="daterange"
			      range-separator="至"
			      value-format="yyyy-MM-dd"
			      start-placeholder="开始日期"
			      end-placeholder="结束日期">
			    </el-date-picker>
			    
			  </el-form-item>
			  <el-form-item label="活动区域">
			    <el-select v-model="form.warnArea" placeholder="区域名称">
			    
			      <el-option
			      	v-for="item in areas"
			      	 :label="item.name" :value="item.id"
			      	 ></el-option>
			    </el-select>
			  </el-form-item>
			  <el-form-item>
			    <el-button type="primary" @click="search" >查询</el-button>
			    <el-button type="primary"  @click="reset">重置</el-button>
			    <el-button type="primary"  @click="outPut">导出</el-button>
			  </el-form-item>
			</el-form>
        	
        	<table-common 
        		:loading="loading"
        		@detail="detail"
        		:total="total"
        		:tableType = "tableType"
        		:tableData="tableData" 
        		:tableTitle="tableLabel">
        	</table-common>
        	
        	<el-dialog
		      title="查看详情"
		      :visible.sync="dialogVisible2"
		      width="50%"
		      class="diy-dialog"
		      :append-to-body="true"
		    >
		     <smart-resource-alert-detail
		     :id = "clickId"
		     :form = "alertRiDetailForm"
		     :detail="alertRiDetail"
		     ></smart-resource-alert-detail>
		    </el-dialog>
        	
    </section>
</template>

<script>
    import tableCommon from "../common/tableCommon"
    import smartResourceAlertDetail from "../common/smartResourceAlertDetail"
	import {
		computedAlertSearch,
		warnLogArea,
		warnLogDetail,
		deadLogDetail,
		warnLogDown
	} from "../css_js_img/computedSmartResource"
    export default {
    	components:{
    		tableCommon,
    		smartResourceAlertDetail
    	},
        data() {
          return {
          		loading:false,
          		clickId:0,
          		total:0,
          		dialogVisible2:false,
          		tableType:'alert',
          		total:0,
          		areas:[],
          		warnLogDealList:{},
          		form:{
          			warnArea:"",	
					startTime: "",		
					endTime: "",
					time:['',''],
					pageNum:1,
					pageSize:10
          		},
          		tableLabel:{
          			id:'日志标识'	,
          			warnItem:'告警事项',
          			warnTime:'告警时间',
          			warnArea:'告警区域',
          			isCreateCopy:'是否生成副本',
          			createStatu:'生成状态',
          			createTime:'副本生成时间',
          			isInform:'是否通知运维',
          			informTime:'通知时间',
          			dealNames:'处理人员',
          			status:'当前状态',
          		},
          		tableData:[
          		
          		],
          		alertRiDetailForm:{
          			name1:"",
          			name2:'',
          			name12:'',
          			name23:'',
          			name14:'',
          			name25:'',
          			name1w:'',
          			name2d:'',
          			name1f:'',
          			name2g:'',
          		},
          		alertRiDetail:[
          			{
          				name:'基本信息',
          				elRow:[
          					[
          						{
	          						name:'日志标识',
	          						value:'name1'
          						},
          						{
	          						name:'告警事项',
	          						value:'name2'
          						}
          					],
          					[
          						{
	          						name:'告警时间',
	          						value:'name12'
          						},
          						{
	          						name:'告警区域',
	          						value:'name23'
          						}
          					],
          					[
          						{
	          						name:'是否生成副本',
	          						value:'name14'
          						},
          						{
	          						name:'生成状态',
	          						value:'name25'
          						}
          					],
          					[
          						{
	          						name:'是否通知运维',
	          						value:'name1w'
          						},
          						{
	          						name:'通知时间',
	          						value:'name2d'
          						}
          					],
          					[
          						{
	          						name:'当前状态',
	          						value:'name1f'
          						},
          						{
	          						name:'处理人员',
	          						value:'name2g'
          						}
          					],
          				],
          			},
          			{
          				name:'处理轨迹',
          				elRow:[
	          				
          				]
          			}
          			
          		],
          };
        },
        methods: {
        		search(){
        			computedAlertSearch(this);
        		},
        		detail(scope){
        			console.log(scope);
        			warnLogDetail(this,scope.row.id,scope.$index);
//      			deadLogDetail(this,scope.$index);
        			this.dialogVisible2 = true;
        		},
        		reset(){
        			Object.assign(this.$data, this.$options.data())/*重置data数据*/
        		},
        		outPut(){/*导出*/
        			warnLogDown(this);
        		}
        },
        mounted(){
        	this.search();
        	warnLogArea(this);
        }
  };
</script>

<style scoped="scoped">
    .alert_ri{
        padding: 10px;
    }
   @keyframes dialog-fade-in {
  0% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes dialog-fade-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
} 
</style>